<!--热门推荐-->
<template>
  <div class="bookRecommend">
    <h3>热门推荐</h3>
    <ul v-for="book in books" :key="book.id">
      <li>
        <router-link :to="{ name: 'hot', params: { id: book.id } }"
          >{{ book.name
          }}{{ currency(factPrice(book.price, book.discount)) }}</router-link
        >
      </li>
    </ul> 
  </div>
</template>

<script>
export default {
  name: "HomeBooksHot",
  data() {
    return {
      books: [],
    };
  },
  created() {
    this.axios
      .get("/hot")
      .then((res) => {
        this.books = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    handle(name) {
      console.log(name);
    },
  },
  inject: ["factPrice", "currency"],
};
</script>

<style>
.bookRecommend {
  flex: 2;
  text-align: center;
  height: 100%;
  border: 3px solid gainsboro;
  padding: 10px;
  margin: 0 10px;
}

.bookRecommend h3 {
  font-weight: 700;
  font-size: 20px;
  padding: 11px 0;
}
.bookRecommend li {
  margin-bottom: 7px;
}
</style>
